<!DOCTYPE html>
<!-- <html manifest="cache.manifest"> -->

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">	
    <meta name="viewport" content="height=device-height,width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    
    
    <title>Test 3.2 - menu</title>
    <link rel="stylesheet" href="css/ext-touch.css" type="text/css">
    <link rel="stylesheet" href="css/style.css" type="text/css">
    


    <script type="text/javascript" src="js/ext-touch.js"></script>    
  
    <script type="text/javascript" src="index.js"></script>
    
    
    <script var card_number=1; ></script>
    
<!--    <link rel="stylesheet" href="small-screen.css" type="text/css" media="only screen and (max-device-width: 480px)"/> -->



</head>
<body onorientationchange ="setTimeout(function(){window.scrollTo(0,1)},10);"; onload ="setTimeout(function() {window.scrollTo(0,1)},10);">

<div "hide everything" class="x-hide-display ">

<div id="backdrop1" class="background"  class="x-hide-display"style="height:100%"><img src="photos/10.jpg">
</div>  
        
<div id="c1" {z-index:5;}>
        <div id="issue-wrapper">  
            <div id= "test" class="test">test</div>
            <div id= "magazine" class="magazine">magazine</div>
            </div>  
        </div>

        
        
<div id="backdrop2" class="background"><img src="photos/11.jpg"></div>              

<div id="c2" {z-index:5;}  class="x-hide-display">        
    <div id="c2-title" class = "main-wrapper">
        <div class="start article-title">
           <a href="#" onClick="javascript:change(1); return false;">What is <logo-inline>test</logo-inline> Magazine?</a>
        </div>
    </div>
    
    <div class="space-padding-75"> </div>
    
    <div id="article-wrapper" class="x-hide-display">
        <div class="issue-container">

<div class="right-side">
<p><logo-inline>test</logo-inline> magazine is a collection of content to test a publishing concept whose primary goal is get as many creating content for mobile devices as possible. There is an example of a photo portfolio, an example of written content with a unique flow, several conceptual advertisements and a test of a table of contents. This  project uses as many of the new, modern web technologies as possible, including HTML5, which allows you to save this file to the homepage of most mobile devices (not implemented just yet, however). There are extensive CSS3 concepts being used within, as well as advancements in font management using webfonts.</p>
</div>
<div class="left-side">
<p>
<logo-inline>test</logo-inline> magazine is open to others to create their own content. I have tried to use systems that allow another to change the backdrops, the text content and the images. With some advanced capability the entire look and feel of the prototype can be changed to make your publication as unique as your content.</p>
</div>
<div class="space-padding-25">   </div>
            </div>
        
        </div>

    </div>


    <div id="c3" class="x-hide-display">        
        <div id="c3-title" class = "main-wrapper">
        <div class="start article-title">
        <a href="#" onClick="javascript:change(2); return false;">Text and Images </a>
        </div>
        </div>

        <div id="article-wrapper">
        
        <div class="issue-container">
        
<div class="right-side">
<div class="image-button"><a href="#" onclick="document.body.style.backgroundImage='url(photos/03.jpg)'"><img class="thumb" title="inside8" src="photos/03.jpg" width="50px" height="auto"/></a></div>
<p>The uniting of text and images for online publishing has usually meant incorporating a design as the background for your web based journaling, or as images included in the posts themselves. In the epublishing world for mobile devices these concepts no longer apply. For one thing, the touch screen system enables you to scroll through text over another element. It also allows you to change the background image in it&#8217;s entirety. The concept is similar to a magazine with photographs, but not limited by the amount of space those photographs will take up in the magazine itself.</p>
<p>These photographs can be items which move with the article and the text for the article can scroll vertically overtop. These images can also remain locked as the text for the article moves across them horizontally as well. </p>
</div>
<div class="space-padding-50"></div>
<div class="left-side">
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/04.jpg)'"><img class="thumb" src="photos/04.jpg" alt="" width="100%" height="auto" /></a></p>
<p>For this concept to work, the user must be able to change the magazine itself by choosing the images that are in the background, and you the creator have the chance to format that change by incorporating unique images in your article.</p></div>
<div class="left-side">
<p>The initial concept for this is to include a variety of images whose layout (portrait or landscape) will determine how one holds the device. Initially the images are incorporated as is from your desktop, but eventually they may be chosen from a variety of personal sources and edited to fit the content of the page.</p>
</div>
<div class="right-side">
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a></p>
<p>Due to constraints for screen sizes, and to keep the actual download of completed periodicals small enough to be unobtrusive, these are limited to 1024 x 768 pixels. Eventually they will be compiled to a size specific for the different devices you may end up reading them on (there is no reason to send your iphone the same dimensions as your ipad)</p>
<p>Change the image in the background by clicking on it, and change the orientation by rotating the device.</p>
</div>

<div class="right-side">
<center>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/02.jpg)'"><img class="thumb" src="photos/02.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/04.jpg)'"><img class="thumb" src="photos/04.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/03.jpg)'"><img class="thumb" src="photos/03.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/06.jpg)'"><img class="thumb" src="photos/06.jpg" alt="" width="100%" height="auto" /></a>
<a href="#" onclick="document.body.style.backgroundImage='url(photos/01.jpg)'"><img class="thumb" src="photos/01.jpg" alt="" width="100%" height="auto" /></a>
</center>
</div>


<div class="space-padding-25"> </div>
            </div>
        </div>    
    </div>
    
    
     <div id="c4" class="x-hide-display">
        <div id="c4-title" class = "main-wrapper">
        <div class="start article-title">
           <a href="#" onClick="javascript:change(4); return false;"> Editing and Reformatting</a>
        </div>
        </div>
       
        <div id="article-wrapper">
            <div class="issue-container">
<div class="left-side">
<p>One of the ideas behind making this publication only available in a ten page format once a month is to reinforce the act of editing to people. How many times do you find a newspaper or magazine with grammatical errors or misspellings in it. Wouldn&#8217;t it be nice if they took more time to actually fix those mistakes? Well, this is one way to do it. While a periodical is sitting in the blog status, users can comment on it and offer suggestions. While the &#8216;grammar police&#8217; are usually not appreciated for their instructional wisdom, in this case their suggestions may make your publication better.</p>
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/05.jpg)'"><img class="thumb" src="photos/05.jpg" alt="" width="100%" height="auto" /></a>
</div>
<div class="right-side">
<p>One can, if they choose, decide to create a finalized publication without these edits, forcing it out the window, but sometimes that urge to change things only occurs after it has been sent. If you are trying to sell your publication (a goal I have in the long run) then you should want it to be as good as it could be. Sometimes that means rereading it a few times yourself and letting others have a look at it before it&#8217;s sent to the printer.</p>
<p><a href="#" onclick="document.body.style.backgroundImage='url(photos/01.jpg)'"><img class="thumb" src="photos/01.jpg" alt="" width="100%" height="auto" /></a></p>
</div>
<div class="space-padding-25"></div>
            </div>
        </div>
    </div>

<div id="backdrop5"  <img src="photos/40.jpg" height:100%></div>      
    <div id="c5" class="x-hide-display">
        <div id="c5-title" class = "main-wrapper">
        <div class="start article-title">
           <a href="#" onClick="javascript:change(5); return false;"> Your Best Five Photos</a>
        </div>
        </div>    
        <div class="space-padding-100"> </div>
        <div id="article-wrapper">
        
        <div class="issue-container">
<div class="right-side">
<p>The free version of this system limits you to five images in an article. This is, like the other limitations, a means to keep a publication from becoming too large, as well as (hopefully) forcing the creator to edit their images to a certain degree. If you are commenting on the edition before it is finalized, then suggestions for cropping and adjusting the image, or the outright removal of the image in the long run, may help to make a better issue for your publication.</p></div>
<div id="floating_image"><center><img src="photos/film.png" ></center></div>

<div class="left-side" >
<p>The ultimate goal is to make this system available to everyone with an internet connection, and in the case of portfolios, having sections of themed topics may help with the ultimate goal of showcasing your work. There are advantages to using this form of sharing rather than a hardcopy portfolio or web site.</p></div>
<div class="space-padding-25"> </div>
        </div>
    </div>
    
        <div id="c6" class="x-hide-display">
        </div>
<div style="display: none;">            
    <div id="mainmenu>
test
    </div>
</div>         
        
    
</body>
            
</html>